<!--  -->
<template>
   
  <div>
    <span>预定页面</span>
    <!-- 房间号 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="房间号">
        <el-select v-model="form.nameno" placeholder="请选择会议室房间号">
          <el-option label="601" value="601"></el-option>
          <el-option label="602" value="602"></el-option>
          <el-option label="603" value="603"></el-option>
          <el-option label="604" value="604"></el-option>
          <el-option label="605" value="605"></el-option>
        </el-select>
      </el-form-item>
      <!-- 开始时间 -->
      <el-form-item label="开始时间">
        <el-select v-model="form.startime" placeholder="请选择会议开始时间">
          <el-option label="8:00" value="8"></el-option>
          <el-option label="9:00" value="9"></el-option>
          <el-option label="10:00" value="10"></el-option>
          <el-option label="11:00" value="11"></el-option>
          <el-option label="12:00" value="12"></el-option>
          <el-option label="13:00" value="13"></el-option>
          <el-option label="14:00" value="14"></el-option>
          <el-option label="15:00" value="15"></el-option>
          <el-option label="16:00" value="16"></el-option>
          <el-option label="17:00" value="17"></el-option>
          <el-option label="18:00" value="18"></el-option>
          <el-option label="19:00" value="19"></el-option>
         
        </el-select>
      </el-form-item>
      <!-- 结束时间 -->
      <el-form-item label="结束时间">
        <el-select v-model="form.endtime" placeholder="请选择会议结束时间">
          <el-option label="9:00" value="9"></el-option>
          <el-option label="10:00" value="10"></el-option>
          <el-option label="11:00" value="11"></el-option>
          <el-option label="12:00" value="12"></el-option>
          <el-option label="13:00" value="13"></el-option>
          <el-option label="14:00" value="14"></el-option>
          <el-option label="15:00" value="15"></el-option>
          <el-option label="16:00" value="16"></el-option>
          <el-option label="17:00" value="17"></el-option>
          <el-option label="18:00" value="18"></el-option>
          <el-option label="19:00" value="19"></el-option>
          <el-option label="20:00" value="20"></el-option>
        </el-select>
      </el-form-item>

      <!-- 选择日期 -->
      <el-form-item label="预约日期">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="{ disabledDate: (t) => t.getTime() < Date.now() - 3600 * 1000 * 24}"
            v-model="form.date"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
      </el-form-item>
      <!-- 周期预约 -->
      <el-form-item label="周期预约">
        <el-switch
          v-model="form.lx"
          active-value="ture"
          inactive-value="false"
          @change="s"
        ></el-switch>
      </el-form-item>
      <!-- 周期预约 -->
      <div  v-if="show">
      <el-form-item label="持续周期">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.enddate"
            value-format="yyyy-MM-dd"
            :picker-options="{ disabledDate: (t) => t.getTime() < Date.now() - 3600 * 1000 * 24}"
            style="width: 100%"
           
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
      </el-form-item>
    </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="s">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      //提交对象
      form: {
        //会议室
        nameno: "",
        //开始时间
        startime: "",
        //结束时间
        endtime: "",
        //是否连续预约
        lx: false,
        //预约日期
        date: "",
        //连续结束日期
        enddate: "",
        //用户id，seesion获取
        userid: "",
      },
      
      flag: false,
    };
  },

  components: {},

  methods: {
    //判断是否为null或者undefined
      check() {
      const isnameno =
        this.form.nameno == null ||
        this.form.nameno == undefined ||
        this.form.nameno == "";
      const isstartime =
        this.form.startime == null ||
        this.form.startime == undefined ||
        this.form.startime == "";
      const isendtime =
        this.form.endtime == null ||
        this.form.endtime == undefined ||
        this.form.endtime == "";
      const isuserid =
        this.form.userid == null ||
        this.form.userid == undefined ||
        this.form.userid == "";
      if (isnameno || isstartime || isendtime || isuserid) {
        this.$message.error("请完善填写");
        this.flag = true;
      }
      if(this.endtime <= this.startime){
         this.$message.error("请改正结束时间");
        this.flag = true
      }
      if(this.form.date<this.form.enddate){
        this.$message.error("请改正结束日期");
        this.flag = true
      }
    },
    //提交表单
    onSubmit() {
      this.check();

      if (this.flag) return;

      console.log(this.form);
      const { data: res } = this.axios.post("qwe", this.form);
      if (res.code !== true) {
        return this.$message.error("对不起，预约失败了");
      } else {
        return this.$message.success("预约成功");
      }

      console.log(res.data);
    },
   async s() {
       this.show = !this.show
    },
    //   获取用户id
    getuserid() {
      let user = window.sessionStorage.getItem("access-token");
      const user1 = JSON.parse(user);
      console.log(user1);
      this.form.userid = user1.userid;
      console.log(user1.userid);
    },
  },
  //  create额
  created() {
    // this.getuserid();
    // this.$forceUpdate();
  },
};
</script>
<style >

</style>